<template>
  <div>
    <bpmn-model
      v-if="dataExit"
      :xml="xml"
      :category="category"
      :draftId="draftId"
      :is-view="false"
      @save="save"
      @showXML="showXML"
      @showJSON="showJSON"
    />
    <!--在线查看xml-->
    <el-dialog :visible.sync="viewOpen" width="80%" top="5vh" append-to-body class="scrollbar">
      <template slot="title">
          <el-link type="primary" :underline="false" icon="el-icon-document-copy" v-clipboard:copy="viewData" v-clipboard:success="clipboardSuccess" style="margin-left: 15px;">复制</el-link>
      </template>
      <el-scrollbar>
          <pre class="hljs" v-highlight="viewData"><code :class="viewClass" ref="xmlContent"></code></pre>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import {deptList, expList, postList, readXml, roleList, saveXml, userList, formList} from "@/api/flowable/definition";
import BpmnModel from '@/components/Process'
import vkBeautify from 'vkbeautify'
import hljs from 'highlight.js'
import 'highlight.js/styles/stackoverflow-dark.min.css'
import {buttonList} from "@/api/flowable/button";

export default {
  name: "Model",
  components: {
    BpmnModel,
    vkBeautify
  },
  // 自定义指令
  directives: {
    deep: true,
    highlight:{
      deep: true,
      bind: function bind(el, binding) {
        const targets = el.querySelectorAll('code');
        let target;
        let i;
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i];
          if (typeof binding.value === 'string') {
            target.textContent = binding.value;
            // 取消之前的高亮状态
            if (target.dataset.highlighted) {
              delete target.dataset.highlighted;
            }
            hljs.highlightElement(target);
          }
        }
      },
      componentUpdated: function componentUpdated(el, binding) {
        const targets = el.querySelectorAll('code');
        let target;
        let i;
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i];
          if (typeof binding.value === 'string') {
            // 取消之前的高亮状态
            if (target.dataset.highlighted) {
              delete target.dataset.highlighted;
            }
            target.textContent = binding.value;
            hljs.highlightElement(target);
          }
        }
      },
    }
  },
  data() {
    return {
      xml: "", // 后端查询到的xml
      deployId:"",
      category:"",
      draftId:"",
      formId:"",
      dataExit: false,
      viewOpen: false,
      viewData: '',
      viewClass: 'xml',
    };
  },
  created () {
    this.deployId = this.$route.query && this.$route.query.deployId;
    this.category = this.$route.query && this.$route.query.category;
    this.formId = this.$route.query && this.$route.query.formId;
    this.draftId = this.$route.query && this.$route.query.draftId;
    // 流程发起表单id
    this.modelerStore.formId = this.formId;
    this.getDataList()
  },
  methods: {
    /** xml 文件 */
    getXmlData(deployId) {
      // 发送请求，获取xml
      readXml(deployId).then(res =>{
        this.xml = res.data;
      })
    },
    /** 保存xml */
    async save(data) {
      try {
        const params = {
          name: data.process.name,
          category: data.process.category,
          xml: data.xml,
          formId: this.formId
        };
        const res = await saveXml(params);
        if (res.code === 200) {
          this.$modal.msgSuccess(res.msg);
          // 在saveXml完成后再执行后续步骤
          this.executeNextSteps();
        } else {
          this.$modal.msgError(res.msg);
        }
      } catch (error) {
        console.error(error);
      }
    },

    // 执行下一步
    executeNextSteps() {
      // 关闭当前标签页并返回上个页面
      const obj = {path: "/flowable/definition", query: {t: Date.now()}};
      this.$tab.closeOpenPage(obj);
      this.toggleSideBar();
    },

    /** 指定流程信息列表 */
    getDataList() {
      userList().then(res => {
        this.modelerStore.userList = res.data;
      })
      roleList().then(res => {
        this.modelerStore.roleList = res.data;
      })
      expList().then(res => {
        this.modelerStore.expList = res.data;
      });
      deptList().then(res => {
        this.modelerStore.deptList = res.data;
      })
      postList().then(res => {
        this.modelerStore.postList = res.data;
      });
      formList().then(res => {
        res.data.forEach(item => {
          item.formId = item.formId.toString();
        });
        this.modelerStore.formList = res.data;
      });
      buttonList({status: 0}).then(res => {
        this.modelerStore.buttonOption = res.data;
      })

      // 如果是草稿箱进来的，就不需要再次请求xml
      const draftXml = this.modelerStore.draftXml;
      if (draftXml || this.deployId) {
        if (draftXml) {
          this.xml = draftXml;
          this.dataExit = true;
        } else {
          readXml(this.deployId).then(res => {
              this.xml = res.data;
              this.dataExit = true;
            })
        }
      } else {
        this.dataExit = true;
      }
    },

    /** 展示xml */
    showXML(xmlData){
      this.viewOpen = true;
      this.viewClass = "xml";
      this.viewData = vkBeautify.xml(xmlData);
    },
    /** 展示json */
    showJSON(jsonData){
      this.viewOpen = true;
      this.viewClass = "json";
      this.viewData = vkBeautify.json(jsonData);
    },

    /** 复制代码成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
  },
};
</script>
<style lang="scss" scoped>
.content-box{
  line-height: 10px;
}
// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #ffffff;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      padding: 0 15px;
    }
  }
}

//.hljs {
//  white-space: pre-wrap;
//  word-wrap: break-word;
//}
//.hljs-meta {
//  margin-left: -40px !important;
//}
//.hljs-punctuation:first-child {
//  margin-left: -40px !important;
//}
</style>
